<script setup lang="ts">
import { AddBoxOutlined } from "@vicons/material";
import { DataTableColumns, NButton, NFormItem, NInput } from 'naive-ui';
import { h, inject, ref, watch } from 'vue';

function createData(): any[] {
    return [
        {
            key: 1,
            interface: 'N3',
            "interface-description": 'AB<->CDE',
            name: '',
            name1: '',
        },
        {
            key: 2,
            interface: 'N4',
            "interface-description": 'CDE<->FGH',
            name: '',
            name1: '',
        },
        {
            key: 3,
            interface: '网管',
            "interface-description": `CDV<->ASF
SDS<->一二三四五六七
ABC<->CDFG
EFG<->一二三四五六七
ABC、DFG<->SDP Server`,
            name: '',
            name1: '',
        },
    ]
}
const steps = inject('steps') as any;

const data = ref(createData())
const createColumns = (): DataTableColumns<any> => [
    {
        title: '接口',
        key: 'interface',
        align: 'center'
    },
    {
        title: '接口描述',
        key: 'interface-description',
        align: 'center',
        width: 200,
    },
    {
        title: '链路需求',
        key: 'name',
        render(row, index) {
            return h(NFormItem, {
                path: `table1[${index}].name`,
                rule: {
                    required: true,
                    message: '请输入链路需求',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.name,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入链路需求',
                        onUpdateValue(v) {
                            data.value[index].name = v
                        },
                        onInput(v) {
                            data.value[index].name = v
                        }
                    })
                ]
            })
        },
    },
    {
        title: '承载方案',
        key: 'name1',
        render(row, index) {
            return h(NFormItem, {
                path: `table1[${index}].name1`,
                rule: {
                    required: true,
                    message: '请输入承载方案',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.name1,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入承载方案',
                        onUpdateValue(v) {
                            data.value[index].name1 = v
                        },
                        onInput(v) {
                            data.value[index].name1 = v
                        }
                    })
                ]
            })
        },
    },
]
const emit = defineEmits(['update:value'])
watch(() => data, (data) => {
    emit('update:value', data.value)
}, {
    deep: true
})

</script>

<template>
    <n-data-table :columns="createColumns()" :single-line="false" :bordered="true" :data="data" />
</template>